<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.25" charset="UTF-8">
    <title>Shopping Cart Checkout</title>
    <link rel="StyleSheet" th:href="@{/css/jpetstore.css}" type="text/css" media="screen"/>
</head>
<body>
<div th:replace="common/top"></div>

<div id="BackLink">
    <a th:href="@{/cart/view}">Return to Shopping Cart</a>
</div>

<div id="Catalog">
    <h2>Checkout Summary</h2>

    <table class="CartItems">
        <tr>
            <th>Item ID</th>
            <th>Product ID</th>
            <th>Description</th>
            <th>In Stock?</th>
            <th>Quantity</th>
            <th>List Price</th>
            <th>Total Cost</th>
        </tr>
        <tr th:each="item : ${cart.cartItems}">
            <td>
                <a th:href="@{/catalog/items/{itemId}(itemId=${item.item.itemId})}"
                   th:text="${item.item.itemId}"></a>
            </td>
            <td th:text="${item.item.product.productId}"></td>
            <td>
                <span th:text="${item.item.attribute1}"></span>
                <span th:text="${item.item.product.name}"></span>
            </td>
            <td th:text="${item.inStock ? 'Yes' : 'No'}"></td>
            <td th:text="${item.quantity}"></td>
            <td th:text="${#numbers.formatCurrency(item.item.listPrice)}"></td>
            <td th:text="${#numbers.formatCurrency(item.total)}"></td>
        </tr>
        <tr>
            <td colspan="7" class="TotalRow">
                Sub Total:
                <span th:text="${#numbers.formatCurrency(cart.subTotal)}"></span>
            </td>
        </tr>
    </table>

    <div class="CheckoutActions">
        <a th:href="@{/cart/view}" class="Button">Modify Cart</a>
        <form th:action="@{/order/new}" method="post">
            <input type="submit" value="Continue Checkout" class="Button">
        </form>
    </div>
</div>
<!--脚本-->
<script th:src="@{/js/background.js}" count="500"></script>

<div th:replace="common/bottom"></div>
</body>
</html>